<template>
	<div>
    <Breadcrumb :style="{margin: '15px 0',float: 'left'}">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>营销活动</BreadcrumbItem>
      <BreadcrumbItem>社团网点</BreadcrumbItem>
    </Breadcrumb>
    <Content class="layer-content">
      <Form inline>
        <FormItem>
          <Input style="width: 400px" v-model="keywords" search enter-button placeholder="请输入关键字" @on-search="searchGet" @submit.native.prevent/>
        </FormItem>
        <FormItem>
					<Cascader style="width: 350px" placeholder="请选择地区" :data="regionArray" @on-change="regionSelector" :load-data="loadRegion"></Cascader>
				</FormItem>
        <FormItem>
          <Button @click="reset">重置</Button>
        </FormItem>
        <ButtonGroup>
          <Button @click="Insert" type="warning">新增</Button>
        </ButtonGroup>
      </Form>
      <Table border :columns="columns" :data="dataGrid"></Table>
      <HigPager v-model="query" :total="pageTotal" :init="Init"></HigPager>
    </Content>
    <Modal :footer-hide="true" v-model="showInsertVue" title="新建社团网点" width="70%" @on-cancel="onCancel">
      <CreateVue ref="refAuthorize" :callbank="callEvent" :key="keyIndex"></CreateVue>
    </Modal>
    <Modal :footer-hide="true" v-model="showEditVue" title="编辑社团网点" width="70%" @on-cancel="onCancel">
      <EditVue ref="refEdit" :callbank="callEvent" :key="keyIndex"></EditVue>
    </Modal>
    <Modal :footer-hide="true" v-model="showUpdateVue" title="更新团长" width="70%" @on-cancel="onCancel">
      <UpdateVue ref="refUpdate" :callbank="callEvent" :key="keyIndex"></UpdateVue>
    </Modal>
    <Modal :footer-hide="true" v-model="showMememberVue" title="社团会员" width="70%" @on-cancel="onCancel">
      <Member ref="refMember" :callbank="callEvent" :key="keyIndex"></Member>
    </Modal>
  </div>  
</template>
<script scope>
import CreateVue from './create.vue'
import EditVue from './edit.vue'
import UpdateVue from './update.vue'
import Member from './member.vue'
export default {
  data () {
    return {
      pageTotal: 0,
      keyIndex: 0,
      dataGrid:[],
      regionArray: [],
      keywords: null,
      showInsertVue: false,
      showEditVue: false,
      showUpdateVue: false,
      showMememberVue: false,
      query: {
        pageIndex: 1,
        pageSize: 15
      },
      columns: [
        {
          title: "网点名称",
          key: "srvGroupName",
          width: 200
        },
        {
          title: "团长名称",
          key: "holderName",
          width: 120
        },
        {
          title: "联系电话",
          key: "holderMobile",
          width: 150
        },
        {
          title: "所属区域",
          key: "provinceName",
          render: (h, params) => {
            return h("div", params.row.cityName+params.row.countyName+params.row.townshipName+(params.row.villageName || ''));
          }
        },
        {
          title: "详情地址",
          key: "addressDetail",
        },
        {
          title: "开启状态",
          key: "auditStatus",
          width: 130,
          render: (h, params) => {
            return h("div", [
              h('i-switch',{
                props: {
                  value: params.row.auditStatus === 0 ? false : true
                },
                scopedSlots: {
                  open: () => h('span', '开'),
                  close: () => h('span', '关')
                },
                on: {
                  'on-change': (value) => {
                    this.switchStatus(params.row, value);
                  }
                }
              })
            ])
          }
        },
        {
          title: "创建时间",
          key: "postTime",
          width: 150,
          render: (h, params) => {
            return h("div", this.$date(params.row.postTime,'yyyy-MM-dd HH:mm'));
          },
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          fixed: "right",
          render: (h, params) => {
            return h("Dropdown",{props: {transfer:true,trigger:'click'}},
              [
                h("a",[h("a","下拉菜单"),h("Icon",{props: {type: "ios-arrow-down"}})]),
                h("DropdownMenu",{slot: "list"},
                  [
                    h("DropdownItem",{nativeOn:{click:()=>{this.edit(params.row)}}},"编辑网点"),
                    h("DropdownItem",{nativeOn:{click:()=>{this.update(params.row)}}},"更新团长"),
                    h("DropdownItem",{nativeOn:{click:()=>{this.showMember(params.row)}}},"社团会员"),
                    h("DropdownItem",{nativeOn:{click:()=>{this.Delete(params.row)}},props:{divided:true}},"删除")
                  ]
                ),
              ]
            )
          }
        }
      ]
    }
  },
  components: {
    CreateVue,
    EditVue,
    UpdateVue,
    Member
  },
  methods: {
    Insert() {
      this.$refs.refAuthorize.Init()
      this.showInsertVue = true
    },
    edit(e) {
      this.$refs.refEdit.Init(e)
      this.showEditVue = true
    },
    showMember(e) {
      this.$refs.refMember.Init(e.srvGroupId)
      this.showMememberVue = true
    },
    update(e) {
      this.$refs.refUpdate.Init(e)
      this.showUpdateVue = true
    },
    onCancel() {
      this.keyIndex ++
    },
    callEvent(){
      this.showInsertVue = false
      this.showEditVue = false
      this.showUpdateVue = false
      this.keyIndex ++
      this.Init()
    },
    //获取列表
    Init(){
      new this.$rest({
        gateway: 'agrobiz',
        service: 'agrobiz-uc',
        url: '/v1.0/srv/group/page',
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            this.pageTotal = res.data.data.count
            this.dataGrid = res.data.data.list
            for(let item of this.dataGrid) {
              item.authText = item.auditStatus === 0 ? '关闭' : '启用'
            }
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      }).get()
     },
    regionInit() {
      new this.$rest({
				gateway: 'agrobiz',
        service: "agrobiz-uc",
        url: "/v1.0/plus/union/region/lazy",
				query: {
					equal: {
            regionId: "0"
          }
				},
				action: (res)=>{
					if(res.data.code === 20000){
						const data = res.data.data
						this.regionArray = data
					} else {
						this.$Message.error({
              content: res.data.msg
            })
					}
				}
			}).get()
    },
    loadRegion(item, callback) {
			item.loading = true
			new this.$rest({
				gateway: 'agrobiz',
        service: "agrobiz-uc",
        url: "/v1.0/plus/union/region/lazy",
				query: {
					equal: {
            regionId: item.id,
            regionLevel: 4
          }
				},
				action: (res)=>{
					if(res.data.code === 20000){
						const data = res.data.data
						item.children = data
						item.loading = false
            callback()
					} else {
						this.$Message.error({
              content: res.data.msg
            })
					}
				}
			}).get()
		},
    regionSelector(value) {
      if(!this.query.equal) this.query.equal = new Object()
      this.query.equal.townshipCode = value[value.length - 1]
      this.Init()
		},
     //搜索
    searchGet() {
      let sqlLike = {
        fields: ["srv_group_name","holder_name","holder_mobile"],
        keyword: this.keywords,
      }
      this.query.sqlLike = sqlLike
      this.query.pageIndex = 1
      this.Init()
    },
    //重置
    reset() {
      delete this.query.sqlLike
      this.keywords = null
      this.Init()
    },
    switchStatus(rows,bool) {
      console.log(rows,bool)
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-uc",
        url: "/v1.0/user-src/update/srv/group/status",
        data: {
          pojo: {
            srvGroupId: rows.srvGroupId,
            auditStatus: bool ? 1 : 0
          }
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.$Message.success({
              content: bool?'开启成功':'关闭成功',
              duration: 1
            })
          } else {
            this.$Notice.warning({
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).post()
    },
    Delete(row) {
      this.$Modal.confirm({
        title: '删除提示',
        content: `确定要删除“${row.srvGroupName}”该网点吗？`,
        onOk: () => {
          new this.$rest({
            gateway: 'agrobiz',
            service: "agrobiz-uc",
            url: "/v1.0/user-src/delete/srv/group",
            data: {
              pojo: row.srvGroupId
            },
            action: (res) => {
              if (res.data.code === 20000) {
                this.Init()
                this.$Message.success({
                  content: "删除成功",
                  duration: 1
                })
              } else {
                this.$Notice.warning({
                  desc: `失败原因：${res.data.msg}`,
                })
              }
            },
          }).delete()
        }
      })
    }
  },
  created(){
    this.Init()
    this.regionInit()
  }
}
</script>
<style lang="less" scoped>
.imgs {
  width: 80%;
}
</style>